<template>
  <div>
    <div class="pickItem" v-loading="loading">
      <div style="font-size: 18px; display: flex">
        知识点课程
        <p
          style="
            font-size: 14px;
            color: #f64137;
            margin: 0;
            margin-left: 16px;
            padding: 6px 12px;
            background: #f5f5f5;
            border-radius: 2px;
          "
        >
          点击学习下列课程，学完知识点下的所有课程方可增加对应的学时
        </p>
      </div>
      <van-empty
        description="
          当前课程暂无知识点
        "
        v-if="dataList.length == 0"
      />
      <ul style="display: flex; flex-wrap: wrap">
        <el-card
          :body-style="{ padding: '0px', height: '94px' }"
          v-for="it in dataList"
          :key="it.id"
          class="cardBoxA"
        >
          <div
            style="
              padding: 14px;
              display: flex;
              justify-content: space-between;
              flex-direction: column;
              height: 100%;
            "
            @click="openCard(it)"
          >
            <div
              style="display: flex; justify-content: space-between"
              :title="it.title"
            >
              <span class="titleName">{{ it.title }}</span>
              <p
                v-if="Boolean(it.done)"
                style="
                  border-radius: 2px;
                  color: #fff;
                  text-align: center;
                  background: #f64137;
                  padding: 2px 4px;
                  margin-left: 4px;
                "
              >
                已学习
              </p>
              <p
                v-else
                style="
                  border-radius: 2px;
                  color: #fff;
                  text-align: center;
                  background: #ccc;
                  padding: 2px 4px;
                  margin-left: 4px;
                "
              >
                待学习
              </p>
            </div>
            <div class="bottom clearfix">
              <div style="display: flex; align-items: center">
                <img
                  style="height: 20px"
                  v-if="it.file_type == '视频'"
                  src="@/assets/icon/sp.png"
                  alt=""
                />
                <img
                  style="height: 20px"
                  v-else
                  src="@/assets/icon/wj.png"
                  alt=""
                />
                <time class="time">{{ it.file_type }}</time>
              </div>
              <div
                v-if="activeName != '收藏'"
                class="Collection"
                :title="it.collected ? '取消收藏' : '收藏'"
              >
                <i
                  :class="it.collected ? 'el-icon-star-on' : 'el-icon-star-off'"
                  @click.stop="CollectionClick(it)"
                ></i>
              </div>
            </div>
          </div>
          <!--  v-if="it.viewed" -->
        </el-card>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  materialkmlist,
  materialList,
  collectlist,
  materialCollect,
  materialCancelcollect,
} from "@/api/admin.js";
import { getsubject_id, getsubjectTitle, getapplyid } from "@/utils/auth";
import Pagination from "@/components/Pagination";
import { learnImglist } from "@/utils/learnImg.js";
export default {
  props: ["activeName", "idSad", "tabLabel"],
  components: {
    Pagination,
  },
  watch: {
    idSad(val) {
      this.listData(val);
    },
    activeName() {
      if (this.idSad) {
        this.listData(this.idSad);
      }
    },
  },
  data() {
    return {
      value: "",
      subjct: "",
      serchinput: "",
      list: [],
      dataList: [], //内容表
      fileData: [],
      arrs: "",
      page: 1,
      limit: 6,
      total: 0,
      loading: false,
      govideoIsyes: false,
    };
  },
  methods: {
    command(item) {
      if (item.status == "已学完") {
        this.value = item.title + "—" + item.score + "学时" + "(已学完)";
      } else {
        this.value = item.title + "—" + item.score + "学时";
      }
      this.subjct = item.id;
      this.$emit("msidBox", item.id);
      if (
        this.activeName == "课件" ||
        this.activeName == "视频" ||
        this.activeName == "全部"
      ) {
        this.fileList(this.activeName);
      } else {
        this.collList();
      }
    },
    //课件条件列表
    listData(id) {
      this.subjct = id;
      if (
        this.activeName == "课件" ||
        this.activeName == "视频" ||
        this.activeName == "全部"
      ) {
        this.fileList(this.activeName);
      } else {
        this.collList();
      }
    },
    handleipt() {
      this.page = 1;
      this.pagination();
    },
    //视频  课件 列表
    fileList(activeName) {
      this.dataList = [];
      this.loading = true;
      materialList({
        msid: this.subjct,
        file_type: activeName == "全部" ? "" : activeName,
        page: this.page,
        limit: 1000000,
        serchinput: this.serchinput,
        applyid: getapplyid(),
      }).then((res) => {
        this.dataList = [];
        this.loading = false;
        if (res.code == 200) {
          let num = -1;
          this.total = res.data.count;
          if (Object.keys(res.data).indexOf("scoreGqLimit") != -1) {
            this.govideoIsyes = res.data.scoreGqLimit;
          } else {
            this.govideoIsyes = false;
          }
          res.data.list.map((item) => {
            let list = JSON.parse(item.material_subject_full);
            if (!item.cover_path) {
              for (let i = 0; i < learnImglist.length; i++) {
                for (let k = 0; k < list.length; k++) {
                  let el = list[k];
                  if (
                    el &&
                    el.indexOf(learnImglist[i].id) != -1 &&
                    (el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) <
                      2 ||
                      el.indexOf(learnImglist[i].id) - el.indexOf(this.subjct) >
                        2)
                  ) {
                    item.cover_path = learnImglist[i].src;
                    break;
                  }
                }
              }
            }
          });
          this.dataList = res.data.list;
          // for (let i = 0; i < res.data.list.length; i++) {
          //   let item = res.data.list[i];
          //   if (i % 5 == 0) {
          //     this.dataList.push([]);
          //     num++;
          //   }
          //   this.dataList[num].push(item);
          // }
        }
      });
    },
    //收藏列表
    collList() {
      this.dataList = [];
      this.loading = true;
      collectlist({ msid: this.subjct, subjectid: getsubject_id() }).then(
        (res) => {
          this.dataList = [];
          this.loading = false;
          if (res.code == 200) {
            this.dataList = res.data;
            // let num = -1;
            // for (let i = 0; i < res.data.length; i++) {
            //   let item = res.data[i];
            //   if (i % 5 == 0) {
            //     this.dataList.push([]);
            //     num++;
            //   }
            //   this.dataList[num].push(item);
            // }
          }
        }
      );
    },
    pagination() {
      this.fileList(this.activeName);
    },
    openCard(item) {
      if (this.govideoIsyes) {
        return this.$message.error("今天已学学时已达标，请明天继续学习");
      }
      if (item.file_type == "视频") {
        this.$router.push(
          "/curriculum/video?id=" +
            item.id +
            "&subjctid=" +
            this.subjct +
            "&type=视频" +
            "&route=" +
            this.$router.currentRoute.path +
            "&MediaId=" +
            item.MediaId
        );
      }
      if (item.file_type == "课件") {
        this.$router.push(
          "/curriculum/pdf?pdf=" +
            item.file_path +
            "&id=" +
            item.id +
            "&subjctid=" +
            this.subjct +
            "&type=课件"
        );
      }
    },
    CollectionClick(data) {
      if (data.collected == 0) {
        materialCollect({
          subjectid: getsubject_id(),
          msid: this.subjct,
          mid: data.id,
        }).then((res) => {
          if (res.code == 200) {
            data.collected = 1;
            this.$message.success("收藏成功");
          } else {
            this.$message.error("收藏失败");
          }
        });
      } else {
        materialCancelcollect({
          subjectid: getsubject_id(),
          msid: this.subjct,
          mid: data.id,
        }).then((res) => {
          if (res.code == 200) {
            data.collected = 0;
            this.$message.success("取消收藏成功");
          } else {
            this.$message.error("取消收藏失败");
          }
        });
      }
    },
  },
  created() {},
  mounted() {
    this.$bus.$on("clear", () => {
      this.dataList = [];
    });
  },
  beforeDestroy() {
    this.$bus.$off("clear");
  },
};
</script>

<style lang="scss">
.dropdownMenu {
  // display: flex;
  width: 70%;
  min-width: 679px;
  ul {
    display: flex;
    width: 100%;
    & > li {
      width: 33%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-menu__item {
        width: 100%;
        text-align: center;
        .active {
          // background: #e8f4ff;
          color: #46a6ff;
        }
      }
    }
  }
  .el-radio {
    .el-radio__label {
      padding: 0;
    }
    .el-radio__input {
      display: none !important;
    }
  }
}
.dropdownBoxA {
  padding: 3px 5px;
  border: solid 1px #eee;
  border-radius: 5px;
  background: #46a6ff;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.contentBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-dropdown-link {
  display: flex;
  width: 450px;
  line-height: 1;
  padding: 8px 5px;
  justify-content: space-between;
  color: #fff;

  i {
    // text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
.pickItem {
  height: calc(100% - 38px - 52px);
  ul {
    padding: 18px 0;
    min-height: 94px;
    margin-left: -6px;
  }
  .Collection {
    position: absolute;
    top: 0px;
    right: 0px;
    .el-icon-star-on:before {
      color: #f5a623;
      font-size: 24px;
    }
    .el-icon-star-off:before {
      font-size: 24px;
    }
  }
  .time {
    font-size: 14px;
    color: #999;
    margin-left: 10px;
  }

  .bottom {
    position: relative;
    width: 100%;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 220px;
    display: block;
  }

  //   .clearfix:before,
  //   .clearfix:after {
  //       display: table;
  //       content: "";
  //   }

  .clearfix:after {
    clear: both;
  }
  .el-card {
    width: 255px;
    border: none;
    cursor: pointer;
  }
}
.jiaobiao {
  display: none;
  position: absolute;
  top: 20px;
  right: -80px;
  transform: rotate(40deg);
  background: #f00;
  // padding:10px;
  height: 30px;
  width: 200px;
}
.jiaobiaoText {
  display: none;
  position: absolute;
  // padding:10px;
  transform: rotate(40deg);
  top: 15px;
  right: 15px;
  color: #fff;
}
.cardBoxA {
  // margin-left: 10px;
  margin: 0 6px;
  margin-top: 12px;
  // &:first-child {
  //   margin-left: 0;
  // }
  .titleName {
    display: block;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
  }
  &:hover {
    .titleName {
      color: #175dff;
    }
  }
}
.cardBox {
  .jiaobiao {
    display: block;
  }
  .jiaobiaoText {
    display: block;
  }
}

.cardBoxB {
  margin-left: 0;
}
.cardBoxC {
  margin-top: 0;
}
</style>